<template>
	<section>
		<el-card class="box-card">
			<el-form :model="editForm" :label-position="top" ref="editForm">
				<el-form-item>
					<label >轮播图片</label>
					<el-upload action="//jsonplaceholder.typicode.com/posts/" :thumbnail-mode="true" type="drag"
						:on-preview="handlePreview"
						:on-success="handSuccess"
						>
					<i class="el-icon-upload"></i>
					<div class="el-dragger__text"><em>点击上传</em></div>
					<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>	
					</el-upload>
				</el-form-item>
				<el-form-item label="轮播序号">
					<el-input v-model="editForm.number"></el-input>
					<el-checkbox v-model="checked" checked>是否启用</el-checkbox>
				</el-form-item>
				<el-form-item label="大B用户">
					<el-input readonly="true" v-model="editForm.names"></el-input>
				</el-form-item>
				<el-form-item label="商品名称">
					<el-input readonly="true" v-model="editForm.productName"></el-input>
				</el-form-item>
				<el-form-item label="商品单价">
					<el-input readonly="true" v-model="editForm.productPrice"></el-input>
				</el-form-item>
				<el-form-item label="单位">
					<el-input readonly="true" v-model="editForm.productUnit"></el-input>
				</el-form-item>
				<el-form-item label="商品状态">
					<el-input readonly="true" v-model="editForm.productStatus"></el-input>
				</el-form-item>
				<el-form-item label="城市" style="margin-bottom: 22px;">
					<el-input v-if="true"  v-model="editForm.citys"></el-input>
					<el-input v-else  :disabled="true" v-model="editForm.citys"></el-input>
				</el-form-item>
			</el-form>
			<el-col :span="24" style="margin-bottom: 10px;">
				<el-button  type="primary">更新</el-button>
				<el-button  type="danger">确认删除</el-button>
				<el-button style="float:right;">返回</el-button>
			</el-col>
		</el-card>
		<el-dialog title="预览" v-model="previewVisible">
			<img :src="previewImageUrl" v-if="previewVisible" style="width: 100%">
		</el-dialog>
	</section>
</template>
<style type="text/css">
.el-upload__inner {
	height: 308px;
	width: 500px;
}
input.el-upload__input {
	display: none;
}
.el-icon-upload {
	margin-top: 100px!important;
}
/*.el-form-item {
	margin-bottom: 0;
}*/
.el-draggeer__cover__btns {
	margin-top: 10%;
}
</style>
<script type="text/javascript">
	export default {
		data(){
			return {
//				fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
				productType : 'true',
				editForm : {
					number : 0,
					names : "武侯",
					citys : "上海市"
				},
				previewVisible: false,
				previewImageUrl: "",
			}
		},
		methods: {
			handlePreview (file) {
                this.previewImageUrl = file.url;
                this.previewVisible = true;
           },
           handSuccess (response, file, fileList){
           		
           }
		}
	}
</script>